<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端 - 需求详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #f5f5f5;
        }
        /* 主色调蓝紫色 */
        .primary-color {
            color: #6366f1; /* indigo-500 */
        }
        .primary-bg {
            background: #6366f1;
        }
        .primary-text {
            color: #6366f1;
        }
        .primary-bg-light {
            background: #eef2ff; /* indigo-50 */
        }
        .primary-bg-medium {
            background: #c7d2fe; /* indigo-200 */
        }
        /* 底部导航栏高度和点击区域 */
        .bottom-nav {
            height: 64px;
        }
        .bottom-nav-item {
            padding: 8px 12px;
            min-height: 44px; /* 确保点击区域足够大 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .bottom-nav-item:active {
            opacity: 0.7;
        }
        /* 安全区域适配（iPhone X等） */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .bottom-nav-wrapper {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm px-4 py-3 flex items-center justify-between">
        <i class="fas fa-arrow-left text-gray-600 text-xl"></i>
        <div class="text-lg font-semibold text-gray-800">需求详情</div>
        <i class="fas fa-ellipsis-v text-gray-600 text-xl"></i>
    </nav>

    <div class="pb-24">
        <!-- 需求基本信息 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h1 class="text-xl font-bold primary-text mb-2">系统功能优化需求</h1>
            <div class="flex items-center space-x-2 mb-3">
                <span class="primary-bg-medium primary-text text-xs px-2 py-1 rounded">处理中</span>
                <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">功能开发</span>
            </div>
            <div class="flex items-center space-x-2 mb-3">
                <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>
                <span class="text-gray-600 text-sm">优先级：中</span>
            </div>
            <p class="text-gray-700 text-sm mb-4 leading-relaxed">
                需要优化系统的性能，提升用户体验，包括页面加载速度、数据处理效率等方面的改进。希望能够在现有基础上提升30%的性能指标。
            </p>
            <div class="text-gray-400 text-xs">
                <div>提交于 2024-01-15 10:30</div>
                <div class="mt-1">最后更新 2024-01-16 14:20</div>
            </div>
        </div>

        <!-- 处理进度 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">处理进度</h2>
            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="flex flex-col items-center mr-4">
                        <div class="w-3 h-3 primary-bg rounded-full"></div>
                        <div class="w-0.5 h-12 primary-bg mt-1"></div>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-gray-800">需求已提交</div>
                        <div class="text-xs text-gray-500 mt-1">2024-01-15 10:30</div>
                        <div class="text-xs text-gray-600 mt-1">顾问：李顾问</div>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="flex flex-col items-center mr-4">
                        <div class="w-3 h-3 primary-bg rounded-full"></div>
                        <div class="w-0.5 h-12 primary-bg mt-1"></div>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-gray-800">需求分析中</div>
                        <div class="text-xs text-gray-500 mt-1">2024-01-16 09:15</div>
                        <div class="text-xs text-gray-600 mt-1">正在评估技术方案</div>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="flex flex-col items-center mr-4">
                        <div class="w-3 h-3 primary-bg rounded-full"></div>
                        <div class="w-0.5 h-12 primary-bg mt-1"></div>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-gray-800">方案设计中</div>
                        <div class="text-xs text-gray-500 mt-1">2024-01-16 14:20</div>
                        <div class="text-xs text-gray-600 mt-1">正在设计优化方案</div>
                    </div>
                </div>
                <!-- 增加一个报价待确认 -->
                <div class="flex items-start">
                    <div class="flex flex-col items-center mr-4">
                        <div class="w-3 h-3 primary-bg rounded-full border-2 border-white" style="box-shadow: 0 0 0 2px #6366f1;"></div>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-gray-800">报价待确认</div>
                        <div class="text-xs text-gray-500 mt-1">2024-01-16 16:00</div>
                        <div class="text-xs text-gray-600 mt-1">报价待确认</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 沟通记录 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">沟通记录</h2>
            <div class="space-y-4">
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 primary-bg rounded-full flex items-center justify-center text-white text-xs">
                        李
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center space-x-2 mb-1">
                            <span class="text-sm font-medium text-gray-800">顾问</span>
                            <span class="text-xs text-gray-400">2024-01-16 14:20</span>
                        </div>
                        <div class="text-sm text-gray-700 bg-gray-50 rounded-lg p-2">
                            您好，我已经开始分析您的需求，预计明天可以给出初步方案。
                        </div>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white text-xs">
                        我
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center space-x-2 mb-1">
                            <span class="text-sm font-medium text-gray-800">我</span>
                            <span class="text-xs text-gray-400">2024-01-16 15:30</span>
                        </div>
                        <div class="text-sm text-gray-700 primary-bg-light rounded-lg p-2">
                            好的，谢谢！
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关报价 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">相关报价</h2>
            <div class="border border-gray-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">报价单号：QT20240116001</span>
                    <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded">待确认</span>
                </div>
                <div class="text-2xl font-bold primary-text mb-2">¥15,000</div>
                <div class="text-xs text-gray-400 mb-3">报价时间：2024-01-16 16:00</div>
                <button class="w-full primary-bg text-white py-2 rounded-lg text-sm" onclick="window.location.href='customer-quotation-detail.html'">查看详情</button>
            </div>
        </div>

        <!-- 相关协议 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">相关协议</h2>
            <!-- 有协议时显示协议详情，否则显示暂无协议 -->
            <div class="border border-gray-200 rounded-lg p-4 mb-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">协议编号：XY20240116001</span>
                    <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">已生效</span>
                </div>
                <!-- <div class="text-xl font-bold primary-text mb-2">服务合作协议</div> -->
                <div class="text-xs text-gray-400 mb-2">签署时间：2024-01-17 10:15</div>
                <div class="text-sm text-gray-700 mb-2">
                    协议摘要：本协议约定了双方的服务内容、权利义务及其他相关事项。
                </div>
                <button class="w-full primary-bg text-white py-2 rounded-lg text-sm" onclick="window.location.href='customer-agreement-detail.html'">
                    查看详情
                </button>
            </div>
            <!-- 如无协议，可取消下方注释显示 -->
            <!-- <div class="text-center text-gray-400 text-sm py-4">暂无协议</div> -->
        </div>
    </div>

    <!-- 底部导航栏（Tab Bar） -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 bottom-nav-wrapper" style="max-width: 414px; margin: 0 auto;">
        <div class="grid grid-cols-4">
            <!-- 首页 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-home.html'" role="button" tabindex="0" aria-label="首页" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-home.html'}">
                <i class="fas fa-home text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">首页</div>
            </div>
            <!-- 需求（当前选中） -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-requirement-list.html'" role="button" tabindex="0" aria-label="我的需求列表" aria-current="page" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-requirement-list.html'}">
                <i class="fas fa-list primary-color text-xl" aria-hidden="true"></i>
                <div class="primary-color text-xs mt-1 font-medium">需求</div>
            </div>
            <!-- 案例 -->
            <div class="bottom-nav-item" onclick="window.location.href='#'" role="button" tabindex="0" aria-label="服务案例" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='#'}">
                <i class="fas fa-heart text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">案例</div>
            </div>
            <!-- 我的 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-profile.html'" role="button" tabindex="0" aria-label="个人中心" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-profile.html'}">
                <i class="fas fa-user text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">我的</div>
            </div>
        </div>
    </div>
</body>
</html>
